# 🪶 Tool-Based Generative UI Haiku Creator

## What This Demo Shows

This demo showcases CopilotKit's **tool-based generative UI** capabilities:
1. **Frontend Rendering of Tool Calls**: Backend tool calls are automatically rendered in the UI
2. **Dynamic UI Generation**: The UI updates in real-time as the agent generates content
3. **Elegant Content Presentation**: Complex structured data (haikus) are beautifully displayed

## How to Interact

Chat with your Copilot and ask for haikus about different topics:
- "Create a haiku about nature"
- "Write a haiku about technology"
- "Generate a haiku about the changing seasons"
- "Make a humorous haiku about programming"

Each request will trigger the agent to generate a haiku and display it in a visually appealing card format in the UI.

## ✨ Tool-Based Generative UI in Action

**What's happening technically:**
- The agent processes your request and determines it should create a haiku
- It calls a backend tool that returns structured haiku data
- CopilotKit automatically renders this tool call in the frontend
- The rendering is handled by the registered tool component in your React app
- No manual state management is required to display the results

**What you'll see in this demo:**
- As you request a haiku, a beautifully formatted card appears in the UI
- The haiku follows the traditional 5-7-5 syllable structure
- Each haiku is presented with consistent styling
- Multiple haikus can be generated in sequence
- The UI adapts to display each new piece of content

This pattern of tool-based generative UI can be extended to create any kind of dynamic content - from data visualizations to interactive components, all driven by your Copilot's tool calls! 